/**
 * 注册页面的主要js代码
 *  */

// 用来存放用户提示消息
let u_msg = document.createElement('p') 
// 用来存放密码提示消息
let pwd_msg = document.createElement('p')

// 用户名是否正常
let u_flag = false
// 密码是否正常
let pwd_flag = false
// 手机号是否正常
let e_flag = false

// 滚动功能
$('html,body').animate({
    scrollTop: $('#register_flag').offset().top - 15
}, 700);

//滚动功能，添加和隐藏小火箭
$(window).scroll(function() {
    const scrollTop = document.documentElement.scrollTop
    const targetTop = $('#register_flag').offset().top - 15
    // 如果没要到滚轮的地方，设置一个可以直接回到滚轮的按钮
    
    if( targetTop - 30 > scrollTop){
        // 显示可以点击的小火箭
        $('#goback_register').show()
    }else if(targetTop + 70 < scrollTop){
        // 显示可以点击的小火箭
        $('#goback_register').show()
    }else{
        // 隐藏小火箭
        $("#goback_register").hide();              
    }
})

// 给小火箭添加滚动事件
$('#goback_register').on('click',()=>{
    $('html,body').animate({
        scrollTop: $('#register_flag').offset().top - 15
    }, 700);
})
// 注册功能
$('#toRegister').on('click',()=>{   
	// 激活焦点
	$('#register_user > input').trigger('blur')
	$('#register_pwsd > input').trigger('blur')
	
	// 先判断是否同意了协议
    if(!$('#register_agreement > input').prop('checked')){
        alert('请勾选同意协议')
        return
    }    
    // post请求
    if(u_flag && pwd_flag && e_flag){
        $.post(
            'register',
            {
                username: $('#register_user > input').val(),
                password: $('#register_pwsd > input').val(),
                email: $('#register_phone').val()
            },
            data=>{
            	if(data){ // 如果成功了，重定向去首页
                    // 准备两个div，一个禁用浏览器窗口，一个弹出倒计时提示
                    $('body').append('<div id="register_success"></div>')
                    $('body').append('<div id="window_success">注册成功！<span>3</span>秒后跳转到首页</div>')

                    // 绑定单击事件，点击确定跳转到首页
                    $('#window_success').on('click',()=>{
                        window.location.href="index"
                    })
                    
                    // 或者使用定时器，倒计时五秒后，跳转到首页
                    setInterval(()=>{
                        let i = $('#window_success > span').text()
                        if(i > 0){
                            $('#window_success > span').text(i-1)
                        }else{
                            window.location.href="index"
                        }
                    },1000)
                   
                }else{
                    alert('注册失败！')
                }
            }
        )
    }
});

// ajax动态检测用户名是否冲突
$('#register_user > input').on('input',function() {
    // 拿到输入的值
    const value = this.value

     // 防止消息冲突，进行解绑,并清空消息
     $(this).off('blur')
     $(u_msg).text('')
    
    // 只有当用户名足够长的时候才发ajax，判断用户名是否存在
    if(value.length > 2 && value.length <= 20){
    	// 发送ajax请求，
    	console.log('检测中');
    	$.post(
               'checkname',
               {'name':$(this).val()},
               data=>{
                   if(data){
                    // 设置提示消息
                    $(u_msg).text('用户名重复')
                    // 设置不能登录
                    u_flag = false
                   }else{
                	   u_flag = true
                   }
               }
           )
      
    }else if(value.length > 20){
        // 设置提示消息
        $(u_msg).text('用户名超过20个字符，过长')
    }else{
        // 重新绑定
        $(this).on('blur',setNameMsgByBlur)
    }
// 这是注册用户，移出焦点时检测功能  
}).on('blur',setNameMsgByBlur)

// 注册密码的同时，检测安全程度
$('#register_pwsd > input').on('input',()=>{
    // 当密码正常的时候才检验
        const value = $('#register_pwsd > input').val()
        console.log(value);
    if(/\s+/.test(value)){
        console.log('有空格，不玩啦');
        return;
    }
    pwd_flag = false
    // 如果长度小于6
    if(value.length < 6){
    	 pwd_flag = true
        // 并且全是数字或者全是小写字母或者全是大写字母
        if(/^\d*$/.test(value) || /^[a-z]*$/.test(value) || /^[A-Z]*$/.test(value)){
            $('#register_check_pwsd > p').text('简单')
            $('#register_check_pwsd > p').css('color','rgb(188, 0, 1)')
            addOrdeleteI(1)
        }else{ // 除此以外
            // 少于2就添加标签，不然就减少标签
            addOrdeleteI(2)
            $('#register_check_pwsd > p').text('普通')
            $('#register_check_pwsd > p').css('color','rgb(255, 216, 0)')
        }
    }else if(value.length <= 16){ // 如果长度小于等于16
    	pwd_flag = true
        Reg0aA = /\d+/.test(value) && /[a-z]+/.test(value) && /[A-Z]+/.test(value)
        Reg0aA$ = /\d+/.test(value) && /[a-z]+/.test(value) && /[A-Z]+/.test(value) && /[`~!#$%^&*()_\-+=<>?:\"{}|,.\/;'\\[\]]/im.test(value)
        
        if(Reg0aA || Reg0aA$){   // 包含数字和小写字母和大写字母和特殊字符，四个中的三个以上就是复杂        
            addOrdeleteI(3)
            $('#register_check_pwsd > p').text('困难')
             $('#register_check_pwsd > p').css('color','rgb(73, 197, 25)')
        }else{
            addOrdeleteI(2)
            $('#register_check_pwsd > p').text('普通')
            $('#register_check_pwsd > p').css('color','rgb(255, 216, 0)')
        }
    } // 太长不做处理
                
// 这是注册密码，移出焦点时检测功能
}).on('blur',setPwdMsgByBlur)

// 自动提示邮箱后缀
$('#register_phone').on('input',function(){
    
    // 如果有先移除掉先前的值
    $('ul').remove('#register_checkPhone > ul')

    // 获取输入的值
    const value = $(this).val()
  
    // 如果检测到@，则不需要提示
    if(/@/.test(value)){     
	    if(/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/.test(value)){
	        // 如果是手动输入邮箱，直接发ajax请求
	        $.post(
	            'checkname',
	            {'email':$('#register_phone').val()},
	            data=>{
	                $('p').remove('#register_checkPhone ~ p')
	                $('#register_checkPhone').css('margin-bottom','50px')
	                
	                if(data){ // 如果邮箱重复
	                    e_flag = false
	                    $('#register_checkPhone').after('<p >邮箱重复！<p>')
	                    $('#register_checkPhone').css('margin-bottom','0')
	                }else{
	                    e_flag = true
	                }       
	            }
	        )
	    }
	    return
    }

    // 生成ul下拉框
    const select_ul = document.createElement('ul')
    $(select_ul).append('<li>'+value+'@qq.com</li>')
    $(select_ul).append('<li>'+value+'@gmail.com</li>')
    $(select_ul).append('<li>'+value+'@163.net</li>')
    $(select_ul).append('<li>'+value+'@sohu.com</li>')
    $(select_ul).append('<li>'+value+'@sogu.com</li>')
    
    // 开始添加
    $('#register_checkPhone').append(select_ul)

    // 添加事件委托(这里发现jquery的on不好使,现已解决)
    $(select_ul).on('click','li',e=>{
        // 拿到被委托的li标签里面的值,往input表单里面设置
        $('#register_phone').val(e.target.innerText)
        
        // 发ajax动态判断
	     $.post(
	         'checkname',
	         {'email':$('#register_phone').val()},
	         data=>{
	        	 $('p').remove('#register_checkPhone ~ p')
	        	 $('#register_checkPhone').css('margin-bottom','50px')
	        	 
	             if(data){ // 如果邮箱重复
	            	 e_flag = false
	                 $('#register_checkPhone').after('<p >邮箱重复！<p>')
	                 $('#register_checkPhone').css('margin-bottom','0')
	             }else{
	            	 e_flag = true
	             }
	         }
	     )
        // 并把ul的display设为none，让其不显示
        $(select_ul).css('display','none')
    })
    
})

/**
 * 失去焦点时，设置用户名的提示消息(只处理小于三个字符的情况)
 */
function setNameMsgByBlur(){

    if($('#register_user > input').val().length < 3){
       
        // 当提示消息为空
        if(u_msg.innerText == ''){
            // 控制登录
            u_flag = false

            // 设置css属性
            $('#register_user > input').css('margin-bottom','5px')
            $('#register_user > input').css('border-color','red')
            // 设置值
            u_msg.innerText= '用户名必须不小于三个字符！'
            $('#register_user').after(u_msg)
         
        }        
    }else{
        // 当提示消息不为空
        if(u_msg.innerText != ''){
            // 控制登录
            u_flag = true

            // 设置css属性
            $('#register_user > input').css('margin-bottom','40px')
            $('#register_user > input').css('border-color','black')
            u_msg.innerText = ''
            // 移出
            $('p').remove('#register_user ~ p:first')
        }
    }
}

/**
 * 失去焦点时，设置密码的提示消息（处理6-16外的情况）
 */
function setPwdMsgByBlur(){
   
    if($('#register_pwsd > input').val().length < 6 || $('#register_pwsd > input').val().length > 16){
        
        // 当提示消息为空
        if(pwd_msg.innerText == ''){
            // 控制登录
            pwd_flag = false

            // 设置边框颜色
            $('#register_pwsd > input').css('border-color','red')

            // 设置值
            pwd_msg.innerText= '密码必须在6-16个字符之间！'
            $('#register_pwsd').after(pwd_msg)
          
        }        
    }else{
        // 当提示消息不为空
        if(pwd_msg.innerText != ''){
            // 控制登录
            pwd_flag = true
            // 设置边框颜色
            $('#register_pwsd > input').css('border-color','black')
            pwd_msg.innerText = ''
            // 移出
            $('p').remove('#register_pwsd ~ p:first')
        }
    }
}

/**
 * 用于添加或者删除标签i（用来动态显示密码安全级别）
 * @param {*} target i要达到的数量，小于它的要添加，大于它的要删除
 * @param {*} now 当前有多少个i（有默认值）
 */
function addOrdeleteI(target, now = $('#register_check_pwsd > div > i').length){
    console.log('当前'+now);
   if(target < now){    // 要删除
        for(let i = target;i < now; i++){
            $('#register_check_pwsd > div > i:last').remove()
        }
    }else if(target > now){ // 要添加
        for(let i = target;i > now; i--){
            $('#register_check_pwsd > div').append('<i></i>')  
        }
    }
}

